body {
    max-width: 768px;
    position: relative;
    /*padding: 1rem;*/
}
p {
    font: .5rem/1 "Microsoft YaHei";
    display: none;
    color: red;
}
.bg {
    min-width: 375px;
    padding: 1rem;
    border: 1px solid #d1c6af;
    border-radius: 1rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.justify-content-around {
    padding: 2%;
}
.code-num {
    height: calc(1.5em + 0.75rem + 2px);
    width: auto;
    background-color: #fff;
    border: 1px solid #d1c6af;
}
.dingdan {
    width: 90%;
    background-color: #fff;
    border-radius: 1rem;
    border: 1px solid #d1c6af;
    margin: 5%;
}
.dingdan a {
    color:#000;
    padding-top: 2rem;
    background: url("../images/user/spirte.png");
}
.dingdan a:nth-of-type(1) {
    background-position: -1rem -1.5rem;
}
.dingdan a:nth-of-type(2) {
    background-position: -6rem -1.5rem;
}
.dingdan a:nth-of-type(3) {
    background-position: -11rem -1.5rem;
}
.dingdan a:nth-of-type(4) {
    background-position: -15.5rem -1.5rem;
}